<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
                </div>
                <div id="ID-tree-demo"></div>
            </div>
        </div>
    </div>


    <script>
        layui.use(function () {
            var tree = layui.tree;
            var layer = layui.layer;
            var util = layui.util;
            var toast = layui.toast;
            var ajaxUtils = layui.AjaxUtils;

            ajaxUtils.request(
                {
                    url: '/auth/org/all-tree-org',
                    type: 'GET'
                }, function (data) {
                    // 渲染
                    tree.render({
                        elem: '#ID-tree-demo',
                        data: data,
                        showCheckbox: true,  // 是否显示复选框
                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                        id: 'demo-id-1',
                        isJump: true, // 是否允许点击节点时弹出新窗口跳转
                        edit: ['add', 'update', 'del'],
                        click: function (obj) {
                            var data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                        }
                    });
                    // 按钮事件
                    util.event('lay-on', {
                        getChecked: function (othis) {
                            var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

                            layer.alert(JSON.stringify(checkedData), { shade: 0 });
                            console.log(checkedData);
                        },
                        setChecked: function () {
                            tree.setChecked('demo-id-1', [3]); // 勾选对应 id 值的节点
                        },
                        reload: function () {
                            tree.reload('demo-id-1', {}); // 重载实例
                        }
                    });
                },
                function (error) {
                    toast.error({
                        message:  error,
                    });
                }
            );
        });
    </script>

</body>

</html>